<template>

  
  <view class="box_comment">
    <view class="text_area">
      <text class="area_num">{{word_num}}/1200字 </text>
    <textarea  class="comment" @input="text_input" confirm-type="done" maxlength="1200" v-model="info.content" placeholder="请输入你的内容" rows="10"></textarea>

    </view>

    <view class="uploadfile">
      
      <uni-file-picker 
      :v-model="imagevalue"
      :image-stlyes="imageStlyes"
       :list-styles="listStyles" 
       limit="9" title="最多选择9张图片"
       @select="select" 
@progress="progress" 
@success="success" 
@fail="fail"
@delete="deletea" 
       ></uni-file-picker>

</view>
  </view>

  <button class="onsub" @click="Onsub">发布</button>
</template>

<script setup lang="ts">
import {http} from '@/utlis/http.ts'
  import {ref} from 'vue'

  const word_num=ref(0)
  const text_input=(value,e)=>{
    word_num.value=value.detail.cursor
  }
  const deletea=(e)=>{
for(let i =0;i<imagevalue.value.length;i++){
  console.log(imagevalue.value[i].url)
  console.log(e.tempFilePath)
  if(imagevalue.value[i].url==e.tempFilePath){
    imagevalue.value.splice(i,1)
  }
}
  }
const select=(e)=>{
  console.log('select',e)
  for(let i =0 ; i<e.tempFilePaths.length;i++){
  uni.uploadFile({
  url: 'admin/image/',
  fileType: 'image',
  filePath: e.tempFilePaths[i], 
  name: 'file',
  success: ({ data, statusCode ,head}) => {
data=JSON.parse(data)
console.log('data',data,head)
imagevalue.value.push({
  name:e.tempFiles[i].name,
  url:e.tempFilePaths[i],
  id:data['id'],
  path:data.url
})
console.log('dd',imagevalue.value)
  },
  fail: (error) => {}
})
}
 
}
const progress=(e)=>{
  console.log('progress',e)
}
const success=(e)=>{
  console.log('success',success)
}
const fail=(e)=>{
console.log('fail',e)
}
let imagevalue=ref([])
  const query = defineProps<{
  serial: string
}>()
console.log('serial:', query.serial)
  const info=ref({
content:'',
is_img:true,
url_list:imagevalue.value
  })
  const Onsub=()=>{
    if(imagevalue.length==0){
      info.value.is_img=false
    }
    info.value.url_list=imagevalue.value
    console.log(info.value);
    
    info.value.url_list=info.value.url_list.map(item=>{return {id:item.id,url:item.path}})
    
    uni.request({
  url: 'invitation/create/',
  data: info.value,
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    if(data.code == 200){
      console.log('commentdata:',data)
    uni.showToast({
      title: '发表成功',
      icon: 'success',
      mask: true
    })
    uni.navigateBack({ delta: 1 })
    }
    else{
      // if(data.code==400){uni.navigateTo({ url: '/pages/login/login' })}
      uni.showToast({
        title: data.errmsg,
        icon: 'error',
        mask: true
      })
    }
  },
  fail: (error) => {
    console.log('网络错误')
    uni.showToast({
      title: '网络错误',
      icon: 'error',
      mask: true
    })
  }
})
  }
  const Onuploadfile=()=>{
    uni.chooseMedia({
      count:1,
      mediaType:['image'],
      success:(res)=>{
        const {temFile}=res.tempFiles[0]
        uni.uploadFile({
          url: 'admin/image/',
          fileType: 'image',
          filePath: tempFilePaths[0],
          name: 'file',
          success: ({ data, statusCode }) => {},
          fail: (error) => {}
        })
      }
    })
  }
  const onchange=(e)=>{
console.log('e:',e)
info.value.star=e.value
  }
  const orderlist=ref([
  
])
const imageStyles=ref({
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				})
const listStyles=ref({
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				})

</script>
<style lang="scss">

.box_comment{
  display: flex;
  flex-direction: column;
  margin: 0px 0px 5px;
  padding: 5px 0px;
  background-color: #fff;

  .text_area{
  border: 1px solid rgba(59, 58, 58, 0.2);
  margin: 3px 5px 5px 5px; 
  padding-bottom: 14px;
  position: relative;
  .area_num{
    position: absolute;
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    bottom: 2%;
    right: 1%;
  }
    .comment{
  width: 98%;
  margin: auto 0;
  padding: 1%;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.01em;
  text-wrap: wrap;
}
  }
.uploadfile{
  display: flex;
  justify-content: center;
  margin: 5px;
  .example-body {
		padding: 10px;
		padding-top: 0;
	}
}
}
.matron{
   
   align-items: center;
   border: 2px rgba(0, 0, 0, 0.7);
   margin-top: 5px;
   margin-bottom: 9px;
   background-color: rgb(255, 255, 255);
   .order_serial{
     padding-top: 8px;
     padding-bottom: 8px;
     padding-left: 6px;
     font-size: 14px;
     font-weight: 350;
     color: #918f8f;
     border-bottom: 0.5px solid rgba(0, 0, 0, 0.3);
   }
   
   
 }
 .item{
   display: flex;
   margin: 5px;
   margin-top: 10px;
   
   .h1-img{
     
     width: 5rem;
     height: 5rem;
     border-radius: 5px;

   }
   .text{
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     letter-spacing: 0.01em;
     margin-left:10px ;
     font-size: 14px;
     font-weight: 500;
     color: rgba(0, 0, 0, 0.5);
     .text_name{
       letter-spacing: 0.09em;
       color: rgba(0, 0, 0, 0.7);
       font-size: 16px;
       font-weight: 600;
     }
   }
   #title{
     font-size: 13px;
   }
   #price{
     color: red;
   }
 }

.fen{
  display: flex;
  font-size: 15px;
  line-height: 15px;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  margin: 5px 0px;
  padding: 10px 0px;
  text{
    margin: 5px;
  }
}

.onsub{
 
  height: 42px;
  margin: 16px 12px 15px 12px;
  line-height: 42px;
  font-size: 30.462rpx;
  letter-spacing: 0.4em;
  color:#fff;
  background-color: #24edc2;
}

</style>
